WebGLシャドウマッピング：リアルタイムレンダリングのための総合ガイド

3Dコンピュータグラフィックスの世界において、リアリズムと没入感に最も貢献する要素は影です。影は、オブジェクト間の空間的な関係、光源の位置、そしてシーン全体のジオメトリに関する重要な視覚的手がかりを提供します。影がなければ、3Dの世界は平坦で、まとまりがなく、人工的に感じられます。WebGLを搭載したウェブベースの3Dアプリケーションにとって、高品質なリアルタイムの影を実装することは、プロフェッショナルな体験の証です。このガイドでは、これを実現するための最も基本的で広く使用されているテクニックであるシャドウマッピングについて深く掘り下げていきます。

あなたがベテランのグラフィックスプログラマーであれ、3次元の世界に足を踏み入れたウェブ開発者であれ、この記事はWebGLプロジェクトでリアルタイムの影を理解し、実装し、トラブルシューティングするための知識を提供します。私たちは、中心的な理論から実践的な実装の詳細までを旅し、一般的な落とし穴や現代のグラフィックスエンジンで使用される高度なテクニックを探求します。

第1章：シャドウマッピングの基礎

本質的に、シャドウマッピングは巧妙でエレガントなテクニックであり、シーン内のある点が影の中にあるかどうかを「この点は光源から見えますか？」という単純な問いによって判断します。答えが「いいえ」であれば、何かが光を遮っていることを意味し、その点は影の中にあるはずです。この問いにプログラム的に答えるため、私たちは2パスレンダリングアプローチを使用します。

シャドウマッピングとは？中心的な概念

このテクニック全体は、シーンを2回、それぞれ異なる視点からレンダリングすることを中心に展開します：

• パス1：デプスパス（光源の視点）。最初に、シーン全体を光源の正確な位置と向きからレンダリングします。ただし、このパスでは色やテクスチャは気にしません。必要な情報は深度のみです。レンダリングされた各オブジェクトについて、光源からの距離を記録します。この深度値の集まりは、シャドウマップまたはデプスマップと呼ばれる特別なテクスチャに格納されます。このマップの各ピクセルは、特定の方向における光源の視点から最も近いオブジェクトまでの距離を表します。
• パス2：シーンパス（カメラの視点）。次に、メインカメラの視点から通常通りにシーンをレンダリングします。しかし、描画されるすべてのピクセルに対して、追加の計算を実行します。そのピクセルの3D空間での位置を決定し、「この点は光源からどれくらいの距離にありますか？」と問いかけます。そして、この距離を、対応する位置のシャドウマップ（パス1で作成）に格納された値と比較します。

ロジックは単純です：

• ピクセルの現在の光源からの距離が、シャドウマップに格納された距離よりも大きい場合、それは同じ視線上にもっと光源に近い別のオブジェクトがあることを意味します。したがって、現在のピクセルは影の中にあります。
• ピクセルの距離が、シャドウマップの距離以下である場合、それは何も遮るものがないことを意味し、ピクセルは完全に照らされています。

シーンのセットアップ

WebGLでシャドウマッピングを実装するには、いくつかの主要なコンポーネントが必要です：

• 光源：これはディレクショナルライト（太陽など）、ポイントライト（電球など）、またはスポットライトです。ライトの種類によって、デプスパス中に使用されるプロジェクション行列の種類が決まります。
• フレームバッファオブジェクト（FBO）：WebGLは通常、画面のデフォルトフレームバッファにレンダリングします。シャドウマップを作成するには、オフスクリーンのレンダーターゲットが必要です。FBOを使用すると、画面の代わりにテクスチャにレンダリングできます。私たちのFBOは、デプステクスチャのアタッチメントで設定されます。
• 2セットのシェーダー：デプスパス用のシェーダープログラム（非常にシンプルなもの）と、最終的なシーンパス用のシェーダープログラム（影の計算ロジックを含むもの）が必要です。
• 行列：カメラ用の標準的なモデル、ビュー、プロジェクション行列が必要です。重要なことに、光源用のビュー行列とプロジェクション行列も必要で、これらはしばしば単一の「ライト空間行列」に結合されます。

第2章：2パスレンダリングパイプラインの詳細

2つのレンダリングパスを、行列とシェーダーの役割に焦点を当てて、ステップバイステップで見ていきましょう。

パス1：デプスパス（光源の視点から）

このパスの目標は、デプステクスチャを生成することです。その仕組みは次のとおりです：

1. FBOをバインドする：描画する前に、WebGLにキャンバスではなくカスタムFBOにレンダリングするよう指示します。
2. ビューポートを設定する：ビューポートの寸法をシャドウマップテクスチャのサイズ（例：1024x1024ピクセル）に合わせます。
3. デプスバッファをクリアする：レンダリング前にFBOのデプスバッファがクリアされていることを確認します。
4. 光源の行列を作成する：
   • ライトビュー行列：この行列はワールドを光源の視点に変換します。ディレクショナルライトの場合、これは通常`lookAt`関数で作成され、「eye」が光源の位置、「target」が光源が指す方向になります。
   • ライトプロジェクション行列：平行な光線を持つディレクショナルライトには、正射影（Orthographic Projection）が使用されます。ポイントライトやスポットライトには、透視投影（Perspective Projection）が使用されます。この行列は、影を落とす空間のボリューム（ボックスまたはフラスタム）を定義します。
5. デプスシェーダープログラムを使用する：これは最小限のシェーダーです。頂点シェーダーの唯一の仕事は、頂点位置に光源のビュー行列とプロジェクション行列を乗算することです。フラグメントシェーダーはさらにシンプルで、フラグメントの深度値（そのz座標）をデプステクスチャに書き込むだけです。現代のWebGLでは、FBOが自動的にデプスバッファをキャプチャするように設定できるため、カスタムのフラグメントシェーダーは不要な場合も多いです。
6. シーンをレンダリングする：シーン内のすべての影を落とすオブジェクトを描画します。これでFBOには完成したシャドウマップが含まれます。

パス2：シーンパス（カメラの視点から）

次に、作成したシャドウマップを使用して影を決定し、最終的な画像をレンダリングします。

1. FBOのバインドを解除する：デフォルトのキャンバスフレームバッファへのレンダリングに戻します。
2. ビューポートを設定する：ビューポートをキャンバスの寸法に戻します。
3. 画面をクリアする：キャンバスのカラーバッファとデプスバッファをクリアします。
4. シーンシェーダープログラムを使用する：ここで魔法が起こります。このシェーダーはより複雑です。
   • 頂点シェーダー：このシェーダーは2つのことを行う必要があります。まず、通常通りカメラのモデル、ビュー、プロジェクション行列を使用して最終的な頂点位置を計算します。次に、パス1のライト空間行列を使用して、光源の視点からの頂点の位置も計算しなければなりません。この2番目の座標は、varyingとしてフラグメントシェーダーに渡されます。
   • フラグメントシェーダー：これが影のロジックの中核です。各フラグメントについて：
     1. 頂点シェーダーから補間されたライト空間での位置を受け取ります。
     2. この座標に対してパースペクティブ除算（x、y、zをwで割る）を実行します。これにより、座標は正規化デバイス座標（NDC）に変換され、-1から1の範囲になります。
     3. NDCをテクスチャ座標（0から1の範囲）に変換し、シャドウマップをサンプリングできるようにします。これは単純なスケールとバイアスの操作です： `texCoord = ndc * 0.5 + 0.5;`。
     4. これらのテクスチャ座標を使用して、パス1で作成されたシャドウマップテクスチャをサンプリングします。これにより`depthFromShadowMap`が得られます。
     5. 光源の視点からのフラグメントの現在の深度は、変換されたライト空間座標のz成分です。これを`currentDepth`と呼びましょう。
     6. 深度を比較する： `currentDepth > depthFromShadowMap`の場合、フラグメントは影の中にあります。次に説明する「シャドウアクネ」と呼ばれるアーティファクトを避けるために、このチェックに小さなバイアスを追加する必要があります。
     7. 比較に基づいて、シャドウ係数を決定します（例：照らされている場合は1.0、影の場合は0.3）。
     8. このシャドウ係数を最終的な色の計算に適用します（例：アンビエント光とディフューズ光の成分にシャドウ係数を乗算する）。
5. シーンをレンダリングする：シーン内のすべてのオブジェクトを描画します。

第3章：一般的な問題と解決策

基本的なシャドウマッピングを実装すると、すぐにいくつかの一般的な視覚的アーティファクトが現れます。これらを理解し修正することが、高品質な結果を得るために不可欠です。

シャドウアクネ（自己シャドウイングアーティファクト）

問題：完全に照らされているはずのサーフェスに、奇妙で不正確な暗い線やモアレのようなパターンが見えることがあります。これは「シャドウアクネ」と呼ばれます。これは、シャドウマップに格納された深度値と、シーンパス中に計算された深度値が同じサーフェスのものであるために発生します。浮動小数点数の不正確さやシャドウマップの解像度の限界により、わずかな誤差がフラグメントを誤って自身の背後にあると判断させ、自己シャドウイングを引き起こします。

解決策：デプスバイアス。最も単純な解決策は、比較の前に`currentDepth`に小さなバイアスを導入することです。フラグメントを実際よりもわずかに光源に近づけることで、自身の影から「押し出す」ことができます。

float shadow = currentDepth > depthFromShadowMap + bias ? 0.3 : 1.0;

適切なバイアス値を見つけることは、繊細なバランス調整が必要です。小さすぎるとアクネが残り、大きすぎると次の問題が発生します。

ピーターパンニング

問題：このアーティファクトは、飛ぶことができて影を失ったキャラクターにちなんで名付けられ、オブジェクトとその影の間に目に見える隙間として現れます。これにより、オブジェクトが浮いているように見えたり、接しているはずのサーフェスから切り離されているように見えます。これは、大きすぎるデプスバイアスを使用した直接的な結果です。

解決策：スロープスケールデプスバイアス。一定のバイアスよりも堅牢な解決策は、光源に対するサーフェスの傾斜に応じてバイアスを変化させることです。急なポリゴンはアクネが発生しやすく、より大きなバイアスが必要です。平坦なポリゴンはより小さなバイアスで済みます。WebGLを含むほとんどのグラフィックスAPIは、デプスパス中にこの種のバイアスを自動的に適用する機能を提供しており、これは通常、フラグメントシェーダーでの手動バイアスよりも望ましいです。

パースペクティブエイリアシング（ジャギーエッジ）

問題：影のエッジがブロック状でギザギザ、ピクセル化して見えます。これはエイリアシングの一形態です。これは、シャドウマップの解像度が有限であるために発生します。シャドウマップの1つのピクセル（またはテクセル）が、特にカメラに近いサーフェスや浅い角度で見られるサーフェス上で、最終シーンの広い領域をカバーする可能性があります。この解像度の不一致が、特徴的なブロック状の外観を引き起こします。

解決策：シャドウマップの解像度を上げる（例：1024x1024から4096x4096へ）ことは助けになりますが、メモリとパフォーマンスに大きなコストがかかり、根本的な問題を完全には解決しません。真の解決策は、より高度なテクニックにあります。

第4章：高度なシャドウマッピングテクニック

基本的なシャドウマッピングは基礎を提供しますが、プロフェッショナルなアプリケーションでは、特にエイリアシングなどの制限を克服するために、より洗練されたアルゴリズムが使用されます。

Percentage-Closer Filtering (PCF)

PCFは、影のエッジを柔らかくし、エイリアシングを軽減するための最も一般的なテクニックです。シャドウマップから単一のサンプルを取得してバイナリ（影の中か外か）の決定を下す代わりに、PCFはターゲット座標周辺の領域から複数のサンプルを取得します。

概念：各フラグメントについて、シャドウマップを一度だけでなく、フラグメントの投影されたテクスチャ座標の周りのグリッドパターン（例：3x3または5x5）でサンプリングします。これらの各サンプルについて、深度比較を実行します。最終的な影の値は、これらすべての比較の平均値になります。例えば、9つのサンプルのうち4つが影の中にある場合、フラグメントは4/9だけ影になり、滑らかな半影（影の柔らかいエッジ）が生まれます。

実装：これは完全にフラグメントシェーダー内で行われます。小さなカーネルを反復処理するループを含み、各オフセットでシャドウマップをサンプリングし、結果を蓄積します。WebGL 2はハードウェアサポート（`sampler2DShadow`を使用した`texture`）を提供しており、比較とフィルタリングをより効率的に実行できます。

利点：硬くエイリアシングされたエッジを滑らかで柔らかいエッジに置き換えることで、影の品質を劇的に向上させます。

コスト：パフォーマンスは、フラグメントごとに取得されるサンプル数に応じて低下します。

Cascaded Shadow Maps (CSM)

CSMは、非常に広大なシーンにおいて単一のディレクショナルライト（太陽など）からの影をレンダリングするための業界標準のソリューションです。パースペクティブエイリアシングの問題に直接取り組みます。

概念：中心的なアイデアは、カメラに近いオブジェクトは遠くのオブジェクトよりもはるかに高いシャドウ解像度を必要とするということです。CSMは、カメラの視錐台（ビューフラスタム）をその深度に沿っていくつかのセクション、または「カスケード」に分割します。そして、各カスケードに対して個別の高品質なシャドウマップがレンダリングされます。カメラに最も近いカスケードはワールド空間の小さな領域をカバーするため、非常に高い実効解像度を持ちます。遠くのカスケードは同じテクスチャサイズで徐々に広い領域をカバーしますが、これらの詳細はプレイヤーにはあまり見えないため許容されます。

実装：これはかなり複雑です。

1. CPU側で、カメラのフラスタムを2〜4つのカスケードに分割します。
2. 各カスケードについて、そのフラスタムのセクションを完全に囲むように、ライト用のタイトな正射影行列を計算します。
3. レンダリングループ内で、デプスパスを複数回実行します—各カスケードごとに1回、異なるシャドウマップ（またはテクスチャアトラスの領域）にレンダリングします。
4. 最終的なシーンパスのフラグメントシェーダーで、現在のフラグメントがカメラからの距離に基づいてどのカスケードに属するかを判断します。
5. 適切なカスケードのシャドウマップをサンプリングして、影を計算します。

利点：広大な距離にわたって一貫して高解像度の影を提供するため、屋外環境に最適です。

Variance Shadow Maps (VSM)

VSMはソフトシャドウを作成するための別のテクニックですが、PCFとは異なるアプローチを取ります。

概念：シャドウマップに深度だけを格納する代わりに、VSMは2つの値を格納します：深度（1次モーメント）と深度の2乗（2次モーメント）です。これら2つの値により、深度分布の分散を計算できます。チェビシェフの不等式と呼ばれる数学的ツールを使用して、フラグメントが影の中にある確率を推定できます。主な利点は、VSMテクスチャは標準のハードウェアアクセラレーションによる線形フィルタリングやミップマッピングを使用してぼかすことができることです。これは標準のデプスマップでは数学的に無効です。これにより、固定のパフォーマンスコストで非常に大きく、柔らかく、滑らかな影の半影が可能になります。

欠点：VSMの主な弱点は「ライトブリーディング」です。これは、オクルーダーが重なる状況で光がオブジェクトを透過して見える現象で、統計的近似が破綻するために発生する可能性があります。

第5章：実践的な実装のヒントとパフォーマンス

シャドウマップ解像度の選択

シャドウマップの解像度は、品質とパフォーマンスの直接的なトレードオフです。大きなテクスチャはよりシャープな影を提供しますが、より多くのビデオメモリを消費し、レンダリングとサンプリングに時間がかかります。一般的なサイズは次のとおりです：

• 1024x1024：多くのアプリケーションにとって良好なベースラインです。
• 2048x2048：デスクトップアプリケーションで顕著な品質向上をもたらします。
• 4096x4096：高品質で、主要なアセットや堅牢なカリングを持つエンジンでよく使用されます。

メモリ使用量は2乗でスケールすることを忘れないでください。4096x4096テクスチャは1024x1024の16倍のメモリを使用します。

ライトのフラスタムの最適化

シャドウマップのすべてのピクセルを最大限に活用するためには、ライトのプロジェクションボリューム（その正射影ボックスまたは透視投影フラスタム）が、影を必要とするシーン要素にできるだけぴったりと適合していることが重要です。ディレクショナルライトの場合、これはカメラのフラスタムの可視部分のみを囲むように正射影を適合させることを意味します。シャドウマップの無駄なスペースは、無駄な解像度です。

WebGLの拡張機能とバージョン

WebGL 1 vs. WebGL 2：シャドウマッピングはWebGL 1でも可能ですが、WebGL 2の方がはるかに簡単で効率的です。WebGL 1ではデプステクスチャを作成するために`WEBGL_depth_texture`拡張機能が必要です。WebGL 2にはこの機能が組み込まれています。さらに、WebGL 2はシャドウサンプラー（`sampler2DShadow`）へのアクセスを提供し、ハードウェアアクセラレーションによるPCFを実行できるため、シェーダーでの手動PCFループに比べて大幅なパフォーマンス向上が得られます。

影のデバッグ

影のデバッグは非常に難しいことで知られています。最も役立つテクニックは、シャドウマップを視覚化することです。アプリケーションを一時的に変更して、特定の光源からのデプステクスチャを画面上のクアッドに直接レンダリングします。これにより、ライトが「見ている」ものを正確に確認できます。これは、ライトの行列、フラスタムカリング、またはデプスパス中のオブジェクトレンダリングに関する問題を即座に明らかにすることができます。

結論

リアルタイムシャドウマッピングは、現代の3Dグラフィックスの基礎であり、平坦で生命感のないシーンを、信憑性のあるダイナミックな世界へと変貌させます。光源の視点からレンダリングするという概念はシンプルですが、高品質でアーティファクトのない結果を達成するには、2パスパイプラインからデプスバイアスやエイリアシングのニュアンスまで、根底にあるメカニズムの深い理解が必要です。

基本的な実装から始めることで、シャドウアクネやジャギーエッジのような一般的なアーティファクトに段階的に取り組むことができます。そこから、ソフトシャドウのためのPCFや大規模環境のためのCascaded Shadow Mapsのような高度なテクニックでビジュアルを向上させることができます。シャドウレンダリングへの旅は、コンピュータグラフィックスを非常に魅力的にする芸術と科学の融合の完璧な例です。これらのテクニックを試し、その限界を押し広げ、WebGLプロジェクトに新たなレベルのリアリズムをもたらすことをお勧めします。